<template>
  <div>
    <!--rules:添加定义校验规则-->
    <!--loginForm:默认值-->
    <!--ref 类似于id 通过此属性获取元素-->
    <el-form :rules="rules" :model="loginForm" ref="loginForm" size="small"
             class="loginContainer" label-width="100px">
      <h3 class="loginTitle">系统登录</h3>
      <!--prop：使用校验的时候需要添加prop属性-->
      <!--auto-complete 需不需要自动补全-->
      <el-form-item prop="username" label="活动名称">
        <el-input type="text" v-model="loginForm.username" auto-complete="off" placeholder="输入用户名"/>
      </el-form-item>
      <el-form-item prop="password" label="密码">
        <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="输入密码"/>
      </el-form-item>
      <el-form-item prop="code" label="验证码">
        <el-input type="text" v-model="loginForm.code" style="width: 180px" auto-complete="off" @keydown.enter.native="submitLogin" placeholder="点击图片可更新验证码"/>
        <img :src="verifyCode" id="codeImg" @click="changeImg" style="width: 100px;height: 30px;cursor: pointer"/>
      </el-form-item>

      <el-checkbox v-model="checked" class="loginRemember">记住我</el-checkbox>

      <el-button type="primary" style="width: 100%" @click="submitLogin">登录</el-button>
    </el-form>
  </div>
</template>

<script>
// 没有将封装的请求做成插件前需要在使用的地方import 再使用
// 封装后直接this.
//import {postKeyValueRequest} from '../utils/api.js'
export default {
  name: "login",
  data() {
    return {
      verifyCode: '/verifyCode?'+new Date().getTime(),
      // checkbox默认值
      checked: true,
      // username password的默认值
      loginForm: {
        username: "admin",
        password: "123",
        code: ""
      },
      // 验证规则
      rules: {
        username: [{required: true, message: "请输入用户名", trigger: "blur"}],
        password: [{required: true, message: "请输入密码", trigger: "blur"}],
        code: [{required: true, message: "请输入验证码", trigger: "blur"}],
      }
    }
  },

  methods: {
    // 点击换一张验证码图片
    changeImg() {
      this.verifyCode = "/verifyCode?" + new Date().getTime();
    },
    // 登录点击事件
    submitLogin() {
      // 通过this.$refs获取此页面所有的ref属性的元素
      // .loginForm获取ref=loginForm的元素
      // .validate 验证数据
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          // 使用封装后的请求函数
          this.postKeyValueRequest("/doLogin", this.loginForm).then(resp => {
            // 这里then是封装处理过的返回结果
            if (resp) {
              // 将信息存入到sessionStorage
              window.sessionStorage.setItem("user", JSON.stringify(resp.data));
              // 如果直接访问页面发现没登录  登录后直接跳转到之前直接访问的页面
              let path = this.$route.query.redirect;

              //alert(JSON.stringify(resp))
              // 页面跳转(两种方式)
              //this.$router.push();
              // 通过判断path的值来判断跳转到哪
              this.$router.replace((path == "/" || path == undefined) ? "/home" : path);
            }else{
              this.changeImg();
              this.loginForm.code="";
            }
          })
        } else {
          //提示错误信息
          this.$message.error('请输入完整字段');
          return false;
        }
      })
    }
  }
}
</script>

<style>
.loginContainer {
  border: 1px solid #eaeaea;
  border-radius: 15px;
  background-clip: padding-box;
  margin: 200px auto;
  width: 300px;
  padding: 35px 35px 15px 35px;
  background: #fff;
  box-shadow: 0 0 25px #c6c6c6;
}

.loginTitle {
  margin: 0 auto 15px auto;
  text-align: center;
  color: #505458;
}

.loginRemember {
  margin-bottom: 15px;
}
.el-form-item__content{
  display: flex;
  align-items: center;
}
</style>